<template>
  <div :class="[indexClass(roadIndex),'road-msg']" @click="DealCurRoad(roadKind)">
    <p :class="[roadClass(title),'tip']">{{title}}</p>
    <div>
      <span class="percent"><span class="agency_fb">{{roadSpeed === 1000 ? '-' : roadSpeed.toFixed(0)}}</span><span
        class="percent-tip" v-if="roadSpeed != 1000">km/h</span></span>
      <span class="big-font"><span class="agency_fb">{{roadIndex === 1000 ? '-' : cur_index_type=='01'?roadIndex.toFixed(2):roadIndex.toFixed(1)}}</span><span
        class="small-tip" v-if="cur_index_type !== '01'&&roadIndex != 1000">%</span></span>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import ColorHelper from '../../../util/colpor-helper';
  export default {
    name: 'RoadMsg',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    props: {
      title: {
        type: String
      },
      roadIndex: {
        type: Number,
      },
      roadSpeed: {
        type: Number,
      },
      roadKind: {
        type: Number,
      }
    },

    mounted(){

    },
    computed: {
      ...mapGetters(['cur_index_type']),
    },
    methods: {
      ...mapMutations(['updateCurRoadKind']),
      indexClass(item){
        return ColorHelper.setIndexColor(item, this.cur_index_type);
      },
      roadClass: (title) => {
        switch (title) {
          case '高快速路':
            return 'speed';
            break;
          case '主次干道':
            return 'main';
            break;
          case '支路及其它':
            return 'sub';
            break;
          default:
            return 'main';
            break;
        }
      },
      DealCurRoad(kind){
        this.updateCurRoadKind(kind);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../common/common.scss";

  .road-msg {
    flex-grow: 1;
    height: 50px;
    padding: 5px 7px;
    cursor: pointer;
    &:first-child {
      margin-right: 4px;
    }
    &:last-child {
      margin-left: 4px;
    }
    &.redIndex {
      /*<!--background-color: $font-red;-->*/
      background-color: rgba(255, 0, 59, 0.6);
    }
    &.lineIndex {
      background-color: rgba(255, 99, 18, 0.6);
    }
    &.yellowIndex {
      /*<!--background-color: $font-yellow;-->*/
      background-color: rgba(255, 178, 0, 0.6);
    }
    &.greenIndex {
      /*<!--background-color: $font-green;-->*/
      background-color: rgba(123, 230, 0, 0.6);
    }
    &.baseIndex {
      background-color: rgba(58, 123, 76, 0.6);
    }
    /*background-color: rgba(49, 49, 49, 0.51);*/
    @include backdropBlur;
    p {
      padding-left: 20px;
      font-size: 14px;
      &.speed {
        background: url("../../../../static/images/road/speed@2x.png") no-repeat left center;
      }
      &.main {
        background: url("../../../../static/images/road/main-road@2x.png") no-repeat left center;
      }
      &.sub {
        background: url("../../../../static/images/road/pass-road@2x.png") no-repeat left center;
      }
    }
    div {
      .percent {
        float: left;
        font-size: 18px;
        margin-top: 10px;
        opacity: 0.8;
        span {
          display: inline-block;
          /*vertical-align: middle;*/
          width: 18px;
          height: 20px;
          opacity: 1;
        }
        .percent-tip {
          font-size: 12px;
          vertical-align: baseline;
        }
      }
      .big-font {
        font-family: Agency FB;
        font-size: 30px;
        font-weight: normal;
        float: right;
        margin-top: 0px;
        margin-right: 2px;
        .small-tip {
          font-size: 14px;
          opacity: 0.6;
        }
      }
    }
  }
</style>
